<template>
  <div style="padding: 20px">
    <div style="text-align: center; margin-bottom: 20px">购物车</div>
    <div style="height: calc(100vh - 160px); overflow: auto">
      <div v-if="cartList && cartList.length > 0">
        <van-row
          v-for="(i, index) in cartList"
          :key="index"
          style="
            margin-bottom: 20px;
            border-bottom: 1px solid #e3e3e3;
            background: #fff;
            padding: 20px;
            text-align: center;
          "
        >
          <van-col :span="8" style="text-align: center">
            <img :src="i.img" style="width: 100%" />
          </van-col>

          <van-col :span="12">
            <div style="text-align: left; margin-bottom: 50px">
              {{ i.name }}
            </div>
            <div
              style="display: flex; margin-top: 20px; justify-content: center"
            >
              <span
                style="
                  padding: 5px 14px;
                  border-radius: 10px;
                  border: 1px solid #53b175;
                  font-size: 16px;
                  margin-right: 5px;
                "
                @click="reduceNum(i)"
                >-</span
              >
              <!-- <van-field v-model="i.num" type="number" placeholder="请输入用户名" /> -->

              <input
                autocomplete="off"
                style="
                  width: 20px;
                  padding: 5px 14px;
                  border-radius: 10px;
                  border: none;
                  outline: none;
                  font-size: 16px;
                "
                type="text"
                inputmode="decimal"
                v-model="i.num"
              />

              <span
                @click="addNum(i)"
                style="
                  padding: 5px 14px;
                  border-radius: 10px;
                  background: #53b175;
                  color: #fff;
                  font-size: 16px;
                "
                >+</span
              >
            </div>
          </van-col>
          <van-col :span="4" style="text-align: right">
            <div style="margin-bottom: 54px" @click="removeProduct(i)">
              <van-icon name="cross" />
            </div>
            <div>
              <span>{{ i.unit }}{{ i.totalPrice }}</span>
            </div>
          </van-col>
        </van-row>
      </div>
      <van-empty description="还没有商品哦" v-else />
    </div>
    <div
      style="
        color: #fff;
        background: #53b175;
        width: calc(100% - 40px);
        border-radius: 15px;
        text-align: center;
        position: fixed;
        bottom: 70px;
        margin: 0 auto;
      "
    >
      <div style="padding: 10px 20px" @click="gotoOrder">
        <span> 去结算</span>
      </div>
    </div>

    <div>
      <!-- 底部弹出 -->
      <van-popup
        closeable
        v-model:show="showBottom"
        position="bottom"
        :style="{ height: '60%' }"
      >
        <div class="center">
          <div class="head">
            <p>结算</p>
<!--            <img src="../assets/叉叉.png" />-->
          </div>
          <div class="ta1"></div>
          <div class="b1" >
            <p class="p1">支付</p>
            <div class="ta2">
              <p class="p2">选择方法</p>
              <img src="../assets/右拉.png" />
            </div>
          </div>
          <div class="ta1"></div>
          <div class="b1">
            <p class="p1">付款</p>
            <div class="ta2">
              <img
                class="t1"
                src="../assets/g2.png"
                style="width: 14px; height: 14px"
              />
              <img src="../assets/右拉.png" />
            </div>
          </div>
          <div class="ta1"></div>
          <div class="b1">
            <p class="p1">优惠</p>
            <div class="ta2">
              <p class="p2">精选折扣</p>
              <img src="../assets/右拉.png" />
            </div>
          </div>
          <div class="ta1"></div>
          <div class="b1">
            <p class="p1">总价格</p>
            <div class="ta2">
              <span>
                ¥{{catPrice}}
              </span>
<!--              <p class="p2">$13.97</p>-->
              <img src="../assets/右拉.png" />
            </div>
          </div>
          <div class="ta1"></div>
          <div class="d1">
            <p class="p3">下单既表示您同意我们的</p>
          </div>
<!--          <p class="p3">下单既表示您同意我们的</p>-->
          <div class="d2">
            <p>条款</p>
            <p class="p4">和</p>
            <p>条件</p>
          </div>
          <div class="ta3">
            <p>Home</p>
            <p>Profile</p>
          </div>
          <button>确认支付</button>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, computed} from "vue";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import { userStore } from "../store/piniaStore";
import { myMixin } from "./../mixin.js";

const showBottom = ref(false);

const { errorMsgBox, successMsgBox } = myMixin();

const useUserStore = userStore();
const router = useRouter();
let cartList = useUserStore.cartList;
function addNum(i) {
  i.num += 1;
  i.totalPrice = i.num * i.price;

  useUserStore.calcluteCart();
}
const catPrice  = computed(()=>{
  let pirce =0
  cartList.map(item=>{
    pirce += item.num * item.price
  })

  return pirce
})
function reduceNum(i) {
  if (i.num > 0) {
    i.num -= 1;
    i.totalPrice = i.num * i.price;
  }
  useUserStore.calcluteCart();
}
function removeProduct(i) {
  let index1;
  cartList.forEach((element, index) => {
    index1 = index;
    return (element.id = i.id);
  });
  cartList.splice(index1, 1);

  useUserStore.calcluteCart();
  successMsgBox("移除成功");
}
function gotoOrder() {
  if (!cartList || cartList.length <= 0) {
    errorMsgBox("还没有商品哦");
  }
  showBottom.value = true;
}
</script>
<style scoped>
.cat {
  /*width: 360px;*/
  height: 780px;
  background-color: #f9f9f9;
  border-radius: 10px;
}
.cat h4 {
  height: 60px;
  margin-bottom: 5px;
  background-color: rgba(83, 177, 117, 1);
  border-radius: 19px;
  left: 139.83px;
  top: 738.88px;
  opacity: 1;
  /** 文本1 */
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 60px;
  color: rgba(252, 252, 252, 1);
  text-align: center;
}

.center {
  position: sticky;
  /* width: 280px; */
  bottom: 5px;
  padding: 10px;
  background-color: #f1f2f1;
  border-radius: 20px 20px 0 0;
}
.head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.head p {
  margin-left: 10px;
}
/*.head img {*/
/*  width: 25px;*/
/*  height: 25px;*/
/*}*/
/*.jsp-item */
.p3 {
  display: flex;
  margin-left: -60px;
  font-size: 12px;
  color: #7c7c7c;
}
.ta1 {
  margin-top: 5px;
  width: 100%;
  height: 0;
  opacity: 1;
  border: 1px solid rgba(226, 226, 226, 1);
}
.b1 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.p1 {
  display: flex;
  margin-left: 10px;
  font-size: 14px;
  color: gray;
  flex: 1;
}

.ta2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.d1 {
  margin-top: -5px;
  margin-left: 58px;
  display: flex;
  flex-direction: row;
  align-items: center;
}


.d2 {
  margin-top: -20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.center p {
  font-size: 12px;
  margin-right: 10px;
}

.p4 {
  color: #7c7c7c;
}

.p2 {
  font-size: 14px;
}

.ta2 img {
  margin-left: 10px;
  width: 8px;
  height: 8px;
}

.t1 {
  width: 30px;
  height: 10px;
}
.ta3 {
  margin-top: -20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.ta3 p {
  font-size: 12px;
}
button {
  border-radius: 20px;
  border: none;
  background-color: #54b276;
  color: white;
  width: 90%;
  height: 50px;
  margin: 10px 15px;
}
</style>
